<template>
    <div>
        <cus-modal
            ref="modal"
            :title="!form.id ?  '  添加' :  '修改'"
            @on-visible-change="onVisibleChange"
            width="390"
            @onOk="onOk"
        >
            <Form
                ref="formValidate"
                :model="form"
                :rules="ruleValidate"
                :label-width="100"
            >
                <FormItem
                    label="单位名称:"
                    prop="name"
                    :rules="{ required: true, message: '单位名称不能为空', trigger: 'blur'}"
                >
                    <Input
                        v-model="form.name"
                        clearable
                        maxlength="20"
                        style="width: 200px"
                        placeholder="请输入单位名称"
                    ></Input>
                </FormItem>
                <FormItem
                    label="单位编码:"
                    prop="code"
                    :rules="[{ required: true, message: '单位编码不能为空', trigger: 'blur'}, {required: true, message: '单位编码只能为数字字母', pattern:'^[0-9a-zA-Z]*$', trigger: 'blur'}]"
                >
                    <Input
                        v-model="form.code"
                        clearable
                        style="width: 200px"
                        placeholder="请输入单位编码"
                        maxlength="20"
                    ></Input>
                </FormItem>
                <FormItem
                    label="手机号码:"
                    prop="phone"
                    :rules="[{ required: true, message: '手机号码不能为空', trigger: 'blur'}, { required: true, pattern: '^1[3456789][0-9]{9}$',message: '手机号码格式不正确',trigger: 'blur',},]"
                >
                    <Input
                        v-model="form.phone"
                        clearable
                        style="width: 200px"
                        placeholder="请输入手机号码"
                    ></Input>
                </FormItem>
                <FormItem
                    label="负责人:"
                    prop="functionary"
                    :rules="{ required: true, message: '负责人不能为空', trigger: 'blur'}"
                >
                    <Input
                        v-model="form.functionary"
                        clearable
                        style="width: 200px"
                        placeholder="请输入负责人"
                        maxlength="20"
                    ></Input>
                </FormItem>
            </Form>
        </cus-modal>
    </div>
</template>

<script>
import {
    saveDepartment,
    updateDepartment
} from "@/api/business/dishesModule";

const form = {
    id: "",
    name: "",
    code: "",
    phone: "",
    functionary: "",
    topName: "",
    topCode: "",
    companyId: ""
};

export default {
    data() {
        return {
            form: form,
            ruleValidate: {},
            loading: false
        };
    },
    mounted() {
        this.form = this.$cu.deepClone(form);
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.$refs["formValidate"].resetFields();
                this.form = this.$cu.deepClone(form)
            }
        },
        show() {
            this.$refs["modal"].show = true;
        },
        onOk() {
            this.$refs["formValidate"].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.form.id) {
                        this.updateDepartmentApi();
                    } else this.saveDepartmentApi();
                }
            });
        },
        // 添加单位接口
        saveDepartmentApi() {
            return new Promise((resolve) => {
                saveDepartment({
                    name: this.form.name,
                    companyId: this.form.topCode,
                    code: this.form.code,
                    phone: this.form.phone,
                    functionary: this.form.functionary
                }).then((res) => {
                    if (res.retCode === 2000) {
                        this.$Message.success("添加成功");
                        this.$refs["modal"].show = false;
                        this.$parent.onInit();
                        resolve();
                    } else this.loading = false;
                });
            });
        },
        // 编辑单位接口
        updateDepartmentApi() {
            return new Promise((resolve) => {
                updateDepartment({
                    id: this.form.id,
                    name: this.form.name,
                    companyId: this.form.companyId,
                    code: this.form.code,
                    phone: this.form.phone,
                    functionary: this.form.functionary
                }).then((res) => {
                    if (res.retCode === 2000) {
                        this.$Message.success("编辑成功");
                        this.$refs["modal"].show = false;
                        this.$parent.onInit();
                        resolve();
                    } else this.loading = false;
                });
            });
        },
    },
};
</script>

<style scoped lang="less">
.permission {
    height: 300px;
    width: 500px;
    border: 1px solid #dcdee2;
    overflow-y: auto;
    border-radius: 2px;
    padding: 0 0 0 10px;
}
</style>
